import { useState, useEffect } from "react";
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { Link } from 'react-router-dom'
import { channelsAPI, articlesAPI } from '@/apis/article'
import './index.scss'

const Publish = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const [form] = Form.useForm();
  // 频道配置项
  const [channels, setChannels] = useState([]);

  const getChannel = async ()=> {
    const res = await channelsAPI();
    if (res?.data?.channels) {
      const list = res.data.channels.map(item => ({ value: item.id, label: item.name }))
      setChannels(list);
    } else {
      messageApi.open({
        type: 'error',
        content: '频道获取失败，请重新获取！',
      });
    }
  };

  useEffect(() => {
    getChannel()
  }, [])

  /** 重制数据 */
  const resetFormValue = () => {
    form.resetFields();
  };

  /**
   * 表单提交
   */
  const onFinish = async (val) => {
    console.log(val, 'val');
    const { title, content, type, channel_id, images } = val;
    const params = {
      title,
      content,
      channel_id,
      cover: { type: 0, images: [] }
    };
    const res = await articlesAPI(params);
    console.log(params, res, 'params');
    if (res?.data?.id) {
      messageApi.open({ type: 'success', content: '发布文章成功' });
      resetFormValue();
    } else {
      messageApi.open({ type: 'error', content: '发布文章失败，请重新发布'})
    }
  };

  return (
    <div className="publish">
      {contextHolder}
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to="/">首页</Link> },
            { title: '发布文章' }
          ]}/>
        }
      >
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 16 }}
          // 此处为富文本编译器设置默认值
          initialValues={{ type: 1, content: '' }}
          onFinish={onFinish}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[{ required: true, message: '请输入文章标题' }]}
          >
            <Input placeholder="请输入文章标题" style={{ width: 400 }} />
          </Form.Item>
          <Form.Item
            label="频道"
            name="channel_id"
            rules={[{ required: true, message: '请选择文章频道' }]}
          >
            <Select
              placeholder="请选择文章频道"
              style={{ width: 400 }}
              options={channels}
            />
          </Form.Item>

          <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            <Upload
              name="images"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList
            >
              <div style={{ marginTop: 8 }}>
                <PlusOutlined />
              </div>
            </Upload>
          </Form.Item>
          <Form.Item
            label="内容"
            name="content"
            rules={[{ required: true, message: '请输入文章内容' }]}
          >
            <ReactQuill className="publish-quill" theme='snow' placeholder='请输入文章内容' />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button size="large" type="primary" htmlType="submit">
                发布文章
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Publish